"use client";

//Global
import React, { FC } from "react";
import { useRouter } from "next/navigation";

//Components
import { Button } from "@mui/material";

//Hooks
import { useTypedSelector } from "@/hooks/useTypedSelector";
import { useModalActions } from "@/hooks/useModalActions";

//Utils
import { PROFILE_PAGE } from "@/utils/routes";

//Styles
import styles from "../../styles/header.module.css";

const AuthButtons: FC = () => {
  const { currentUser, status } = useTypedSelector(state => state.user);
  const { push } = useRouter();
  const {
    onChangeModalLogInStatus,
    onChangeModalSignUpStatus,
    onChangeModalCartStatus,
  } = useModalActions();

  const firstHandleButtonClick = () => {
    if (currentUser.email) {
      push(PROFILE_PAGE);
    } else {
      onChangeModalSignUpStatus(true);
    }
  };

  const secondHandleButtonClick = () => {
    if (currentUser.email) {
      onChangeModalCartStatus(true);
    } else {
      onChangeModalLogInStatus(true);
    }
  };

  const buttonSighUpText = currentUser.email ? "Profile" : "Sign Up",
    buttonLogIn = currentUser.email ? "Cart" : "Log In";

  if (status === "pending")
    return <span className={styles.tagline}>Loading...</span>;

  return (
    <nav className={styles.headerButtons}>
      <Button onClick={firstHandleButtonClick}>{buttonSighUpText}</Button>

      <Button onClick={secondHandleButtonClick}>{buttonLogIn}</Button>
    </nav>
  );
};

export { AuthButtons };
